import React, { Component, useEffect, useState } from 'react'
import { init, dispose } from 'klinecharts'
import generatedKLineDataList from '../utils/generatedKLineDataList'
import Layout from '../Layout'
export default class KLineComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            id: '',
            kLineChart: {},
        }
    }
    componentWillMount() {
        this.setState({ id: `basic-k-line${this.props.pIndex || 0}` })

    }
    componentDidMount() {

        const dataList = this.props.data;
        const { kLineChart } = this.state
        this.setKline(dataList, () => {
            this.state.kLineChart.createTechnicalIndicator("MA", false, {
                id: "candle_pane",
            });
            this.state.kLineChart.createTechnicalIndicator("EMA", false, { id: this.id });
            this.state.kLineChart.applyNewData(dataList);
        });
    }
    componentDidUpdate() {
        this.state.kLineChart.applyNewData(this.props.data);
        this.setKline(this.props.data, () => { }, true)

    }

    setKline = (dataList, cb, isset) => {
        let { kLineChart } = this.state
        const emojiTechnicalIndicator = {
            name: "MA",
            calcParams: [25, 60, 99],
            styles: {
                line: {
                    colors: ["red", "green", "yellow", "#E11D74", "#01C5C4"],
                },
            },
            plots: [
                { key: "ma1", title: "MA25：", type: "line" },
                { key: "ma2", title: "MA60：", type: "line" },
                { key: "ma3", title: "MA99：", type: "line" },
            ],
            // 当计算参数改变时，希望提示的和参数一样，即title的值需要改变
            regeneratePlots: (params) => {
                return params.map((p, i) => {
                    return { key: `ma${i + 1}`, title: `MA${p} 1`, type: "line" };
                });
            },
            // 计算结果
            calcTechnicalIndicator: (kLineDataList, calcParams, plots) => {
                // 注意：返回数据个数需要和kLineDataList的数据个数一致，如果无值，用{}代替即可。
                // 计算参数最好取回调参数calcParams，如果不是，后续计算参数发生变化的时候，这里计算不能及时响应
                const closeSums = [];
                return kLineDataList.map((kLineData = {}, i) => {
                    const ma = {};
                    const close = kLineData.close;
                    calcParams.forEach((param, j) => {
                        closeSums[j] = (closeSums[j] || 0) + close;
                        if (i >= param - 1) {
                            ma[plots[j].key] = closeSums[j] / param;
                            closeSums[j] -= (dataList[i - (param - 1)] || {}).close;
                        }
                    });
                    // 如果有值的情况下，这里每一项的数据格式应该是 { ma1: xxx, ma2: xxx }
                    // 每个key需要和plots中的子项key对应的值一致
                    return ma;
                });
            },
        };
        !isset && (kLineChart = init(this.state.id))
        kLineChart.addCustomTechnicalIndicator(emojiTechnicalIndicator);
        !isset && this.setState({ kLineChart }, () => cb && cb())
    }

    render() {
        return (
            <Layout
                title={this.props.title || ''}>
                {
                    <div id={this.state.id} className="k-line-chart" />
                }
            </Layout>
        )
    }
}
